<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>聊天室</title>
  <script src="./js/jquery.js"></script>

      <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

  <style type="text/css">

    #main{width:960px;height:auto;}
    #left{width:700px;height:600px;}
    #right{width:250px;height:600px;margin-left:10px;}
    #left,#right{float:left;}

    #head{width:960px;height:50px;}
    #head span {margin-left: 100px; font-size: 18px}
  </style>
</head>
<body>

  <div id="head">
    <span id="showName">张三</span>

    和 <span id="withName">null</span>

    <span> <a  id="status" href="javascript:void(0);">离线</a></span>

  </div>
  <a href="">zz</a>
  <br>

    <div id="main">
      <div id="left">
        <div style="height: 400px">
         <h3>展示聊天记录</h3>
          <ul id="zhangshi">
<!--            <li style="margin-left: 300px;color: gray">nihaoi</li>
            <li style="margin-left: 10px;color:green">nihaoi1</li>-->
          </ul>
        </div>
        <div id="shuruluang" style="height: 200px" hidden>
          <h3>请输入要发送的信息:</h3>
          <textarea id="content"></textarea>
          <button id="sendMess">发送</button>
        </div>
      </div>

       <div id="right">
         <div style="height: 400px">
           <h2>在线列表</h2>
           <ul id="userList">
             <li> <a  href="javascript:void(0);" onclick="showShurukuang(this)">王五</a></li>
             <li><a  href="javascript:void(0);" onclick="showShurukuang(this)">赵六</a></li>
             <li><a  href="javascript:void(0);" onclick="showShurukuang(this)">田七</a></li>
           </ul>
         </div>
         <div style="height: 200px">
           <h2>系统广播</h2>
           <ul id="boardList">
             <li>李四上线了</li>
           </ul>
         </div>
       </div>
    </div>

<script>

  var userName;

  var toName;


      $.ajax({
        //要用post方式
        type: "Post",
        //方法所在页面和方法名
        url: "getUserName",
        contentType: "application/json; charset=utf-8",
        // dataType: "json",   //非必要
        // data: $('#loginForm').serialize(),//name=Liu&password=123
        data: JSON.stringify({}),//name=Liu&password=123
        success: function(data) {
          //返回的数据用data.d获取内容
          console.log(data)
          $('#showName').html(data)
          userName=data;
        },
        error: function(err) {
          console.log(err);
        },
        async: false
      });



  //建立长连接
  var webSocket = new WebSocket("ws://localhost:8080/chat");

  webSocket.onopen=openWbespocke;

  webSocket.onmessage=onmessageWbespocke;

  webSocket.onclose=oncloseWbespocke;



  function openWbespocke (event){
    $('#status').html("在线")
  }

  function onmessageWbespocke (etc){
    console.log(etc)
    var res=etc.data
    var date= JSON.parse(res)

    if (date.broad){
      var userList="";
      var boardList="";

      for (let i = 0; i < date.message.length; i++) {
        if (userName!=date.message[i]){
          userList+= "<li> <a  href=\"javascript:void(0);\" onclick=\"showShurukuang(this)\">"+date.message[i]+"</a></li>"
          boardList+="<li>"+date.message[i]+"上线了</li>"
        }
      }
      console.log(userList)
      console.log(boardList)
      $("#userList").html(userList)
      $("#boardList").html(boardList)
    }else {
      $('#zhangshi').append("<li style=\"margin-left: 10px;color:green\">"+date.message+"</li>")
    }


  }

  $('#sendMess').click(function (){
   var data= $('#content').val();
   $('#content').val("");

   console.log(data)
   $('#zhangshi').append("<li style=\"margin-left: 300px;color: gray\">"+data+"</li>")
    webSocket.send(JSON.stringify({"toName":toName,"message":data}));


  })

  function oncloseWbespocke (event){
       $('#status').html("离线")
  }

  //展示发送聊天框
  function showShurukuang(obj){
    toName=$(obj).html();
    $('#withName').html($(obj).html())
    $('#shuruluang').removeAttr("hidden");
  }

</script>
</body>
</html>